<template>
	
	<view class="scencelist">
		<!-- #ifdef H5 -->
		<Header @back = "backToWW()" left-icon="back" left-text="" right-text="" title="门票"></Header>
	<!-- #endif -->
			
		<!--搜索-->
		<view style="padding: 0;">
			<searchbar :placeholder="'请输入要搜索的线路名称'" @confirm="onSearchConfirm"></searchbar>
		</view>
		<!--列表-->
	<view class="content">
		<!--热门景区-->
		<view class="scenic-list" v-if="lineRoad_list.length > 0">
			<view class="scenic-info">
				<block v-for="(item,index) in lineRoad_list" :key="index">
					<view class="item-info" @click='goScenicDetail(item.id)'>
						<view class="scenic-left">
							<image :src='item.listImage' style="border-radius: 10upx; width: 100%;height: 100%;"></image>
							<view class="address" v-if="item.cityAddress">
								<text>{{item.cityAddress}}</text>
							</view>
						</view>
						<view class="scenic-right">
							<view class="name">
								<text>{{item.title}}</text>
							</view>
							<view class="tips">
								<view class="tip-info" v-for="(item,index) in item.featureTip" :key="index">
									<text>{{item}}</text>
								</view>			
							</view>
							<view class="comment" style="color: #aaa;">
								<text>{{comment}}人评价</text>
							</view>
							<view class="comment-nums">
								<view class="price-info">
									<text style="font-size: 31upx;font-family: PingFang-SC-Medium;">￥</text>
									<text style="font-size: 47upx;font-family: PingFang-SC-Bold;">{{item.adultPrice || '0'}}</text>
									<text style="font-size: 28upx;font-family: PingFang-SC-Medium;">起</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view style="margin-bottom:40upx;">
			<wxc-flex v-if = 'isNoMore && lineRoad_list.length > 0' dir='left' main='center' cross='center' style='width:100%;'>
					<vline color='#DDDDDD' width='120upx' height='1px'></vline>
					<text class='font-r' style='font-size:24upx;color:#464646;margin-left:26upx;margin-right:26upx;'>没有更多数据啦</text>
					<vline color='#DDDDDD' width='120upx' height='1px'></vline>
			</wxc-flex>
		</view>
		
		<view class="noTime" v-if="fleg"><image style="width: 100%;height: 100%;" src="../../static/img/shuju.png" ></image></view>
		</view>
	</view>
</template>
<style lang="scss" scoped>
		/*
	 	热门景区
	 	*/
	 .scenic-list{
	 	   background: #fff;
	 	   padding: 20upx 24upx 20upx 24upx;
	 	   // margin-top:20upx;
		   
	 }
	 .scenic-title{
	 	   .title{
			   font-family: PingFang-SC-Bold;
	 		   font-size: 40upx;
			   font-weight: 600;
			   color: #000000;
	 		   // font-weight: bold;
	 	   }
	 	   .title-child{
			   color: rgb(77,77,77);
			   font-family: PingFang-SC-Medium;
	 		   color: #4d4d4d;
			   font-size: 30upx;
	 		   letter-spacing:0upx;
	 	   }
	 }
	 .scenic-info{
	 	  
	 	   .item-info{
	 		   padding-bottom: 20upx;
	 		   display: flex;
	 		   // height: 250upx;
	 		   margin-bottom: 20upx;
	 		   border-bottom:1upx solid #eee;
	 	   }
	 	  
	 	   .scenic-left{
	 		   position: relative;
	 		   width: 39%;
			   height: 216upx;
	 		  .address{
	 			  position: absolute;
	 			  top: 0;
	 			  left: 0;
	 			  font-size: 20upx;
	 			  color: #fff;
	 			  padding: 5upx 15upx 5upx 10upx;
	 			  background: rgba($color: #000, $alpha: 0.6);
	 			  border-bottom-right-radius: 13upx;
				  border-top-left-radius: 10upx;
	 			  // width: 100upx;
	 			  // height: 40upx;
	 		  }
	 	   }
	 	   .scenic-right{
			   position: relative;
	 		   width:61%;
			   
	 		   // display: flex;
	 		   // flex-direction: column;
	 		   // justify-content: space-between;
	 		   // align-items: flex-end;
	 		   padding:0 16upx;
	 		   
	 		   .name{
	 			   font-size: 34rpx;
	 			   color: #333;
	 			   letter-spacing: 1rpx;
	 			   font-family: PingFang-SC-Bold;
	 			   font-weight: bold;
	 			   display: -webkit-box;
	 			   overflow: hidden;
	 			   -o-text-overflow: ellipsis;
	 			   text-overflow: ellipsis;
	 			   word-wrap: break-word;
	 			   white-space: normal !important;
	 			   -webkit-line-clamp: 2;
	 			   -webkit-box-orient: vertical;
	 			   line-height: 40rpx;

	 		   }
	 		   .tips{
	 			   // padding: 6upx;
				   margin-top: 10upx;
	 			   display: flex;
	 			   
	 		   }
	 		   .tip-info{
	 			   display: flex;
	 			   align-items: center;
	 			   height: 40upx;
	 			   color: #0092ff;
	 			   font-size: 26upx;
	 			   margin-right: 10upx;
	 			   border-radius: 8upx;
	 			   padding: 20upx 10upx;
	 			   border: 1upx solid #0092ff;
	 		   }
			   .comment{
				   position: absolute;
				   left: 15upx;
				   bottom: 5upx;
				   font-family: PingFang-SC-Medium;
				   	font-size: 26rpx;
				   	font-weight: normal;
				   	font-stretch: normal;
				   	line-height: 37rpx;
				   	// letter-spacing: -1px;
				   	color: #999999;
			   }
	 		   .comment-nums{
	 			   // display: flex;
	 			   // align-items: flex-end;
	 			   // justify-content: space-between;
				   margin-right: 26upx;
				   position: absolute;
				   bottom: 0;
				   right: 0;
	 				
	 			   .price-info{
					   font-family: PingFang-SC-Medium;
	 				   // letter-spacing: 6upx;
	 				   font-size: 32upx;
	 				    color:#ff4d1d;
	 					text{
	 						margin-left: 3upx;
	 					}
	 			   }
	 		   }
	 	   }
	 }
	 .more{
	 	   text-align: center;
	 	   color: #007AFF;
		   // padding-bottom: 2upx;
	 }
	 .noTime{
	 	width: 100%;
	 	height: 430upx;
	 	margin-top: 160upx;
	 	// font-size: 56upx;
	 	text-align: center;
	 	// padding-top: 300upx;
	 	// font-family: PingFang-SC-Bold;
	 	// letter-spacing: 10upx;
	 }

</style>
<script>
	import searchbar from "@/components/search-bar"
	import wxcFlex from "@/components/custom/flex.vue"
	import popupLayer from '@/components/popup-layer/popup-layer.vue';
	import vline from "@/components/custom/vline.vue"
	import wxcElip from "@/components/custom/wxc-elip.vue"
	import hldLabel from "@/components/custom/hld-label.vue"
	import cityList from "@/components/custom/city-list.vue"
	import hldPrice from "@/components/custom/hld-price.vue"
	import Header from "@/components/header.vue"
	var tempKeyword = ''; //用于触底刷新
	var keyword = "";
	var currentPage = 1;
	export default {
		components: {
			searchbar,
			wxcFlex,
			popupLayer,
			vline,
			wxcElip,
			hldLabel,
			cityList,
			hldPrice,
			Header
		},
		data() {
			return {
				fleg:false,
				comment:0,
				lineRoad_list:[],
				isEmpty: false,
				isNoMore: false
			}
		},
		onLoad: function(options) {
			currentPage = 1
			var that = this;
			var lineType = options.lineType;
			this.getList(lineType)
		},
		onShow() {
			//#ifdef H5
			document.title = '线路'
			//#endif
		},
		onReachBottom: function() {
			// if (!this.isNoMore) {
			// 	this.getNewScenceList();
			// }
		},
		computed: {

		},
		methods: {
			onSearchConfirm:function(e){
				console.log(e)
				keyword = tempKeyword;
				currentPage = 1;
				this.isNoMore = false;
				// this.getHotelList();
				this.getList('',e.detail.value);
			},
			getList(lineType,title){
				var params = {
					pageIndex:currentPage,
					pageSize:'10',
					channelType:'1',
					lineType: lineType ? lineType : '普通线路',
					title: title ? title : ""
				}
				this.$postApi(this.$path.GET_LINEROAD_LIST,params).then(res => {
					console.log("线路列表返回数据------------->",res.data);
					// featureTip:[],
					if(res.data.success){
						this.fleg = false
						let list = res.data.data.list;
						let data = res.data.data
						list.forEach(item => {
							item.listImage = this.pub.delLastf(item.listImage);
							item.featureTip = item.featureTip ? item.featureTip.toString().split(';') : ''
							if(item.featureTip){
								item.featureTip.pop()
							}
						})
						if (currentPage == 1) {
						  var content = data.list
						} else {
						  var content = this.lineRoad_list.concat(data.list)
						  console.log("contnet", content)
						}
						var isNoMore = false;
						var isEmpty = false;
						if (content.length == 0) {
						  isEmpty = true;
						  isNoMore = false;
						} else if (!data.hasNextPage) {
						  //已经无再多数据
						  isNoMore = true;
						  isEmpty = false;
						}
						currentPage++;
						 this.lineRoad_list = content
						 this.isNoMore = isNoMore
						 this.isEmpty = isEmpty
						
						// this.lineRoad_list = list;
						console.log("this.scenic_list----------------->",this.lineRoad_list);
					}else{
						this.fleg = true
						this.lineRoad_list = [];
					}
				})
			},
			
			goScenicDetail(id){
				uni.navigateTo({
					url: '/pages/lineroad/lineroaddetail?id=' + id,
					animationType: "pop-in",
					animationDuration: 200
				})
			},
			
		}
	}
</script>


